<template>
  <div class="min-h-200">
    <div class="flex justify-end">
      <n-button v-permission="`/meetingRecords:add`" type="primary" @click="handleAdd">
        添加
      </n-button>
    </div>
    <n-spin :show="loading">
      <div v-if="list.length === 0 && !loading" class="flex-col items-center">
        <img src="@/assets/no-data.png" class="w-100" />
        <div class="font-size-14 color-#9BA3B2">暂无内容</div>
      </div>
    </n-spin>
    <n-collapse v-model:expanded-names="names" display-directive="show">
      <template #arrow>
        <div></div>
      </template>
      <n-collapse-item v-for="(item, index) in list" :key="index" :name="item.time">
        <template #header>
          <n-icon :component="AccessTimeFilled" :size="20"></n-icon>
          <div class="ml-10 font-size-16 color-#030912 font-bold">{{ item.time }}</div>
          <n-tooltip trigger="hover">
            <template #trigger>
              <n-icon
                :component="ArrowRightRound"
                :size="26"
                :color="names.includes(item.time) ? '#0a56d8' : ''"
              ></n-icon>
            </template>
            {{ names.includes(item.time) ? '收起' : '展开' }}
          </n-tooltip>
        </template>
        <div class="meet-list">
          <div v-for="(meetItem, meetIndex) in item.meets" :key="meetIndex" class="meet-item">
            <div class="left">
              <div class="point"></div>
              <div v-if="meetIndex !== item.meets.length - 1" class="line"></div>
            </div>
            <div class="center">{{ dayjs(meetItem.meetingTime).format('DD日 HH:mm') }}</div>
            <div class="right">
              <div class="head">
                <div class="title">{{ meetItem.title }}</div>
                <MyInfo :src="meetItem.avatar" :text="meetItem.userName" />
              </div>
              <div class="record">{{ meetItem.record }}</div>
              <FileList :model-value="meetItem.refFileDtoList" :show-remove="false" />
            </div>
            <div class="handles">
              <n-icon
                v-permission="`/metingRecord:update`"
                :component="ModeEditOutlined"
                class="cursor-pointer"
                @click="handleEdit(meetItem)"
              ></n-icon>
              <n-icon
                v-permission="`/metingRecord:delete`"
                :component="Delete"
                class="cursor-pointer"
                @click="
                  handleDelete(meetItem, {
                    title: '删除会议纪要',
                    content: `请确定是否会议纪要：${meetItem.title}`,
                  })
                "
              ></n-icon>
            </div>
          </div>
        </div>
      </n-collapse-item>
    </n-collapse>
    <MyDrawer
      ref="$form"
      :model-form="model"
      :width="700"
      :disabled="type === 'view'"
      @submit="handleSubmit"
    >
      <n-form-item
        label="会议标题"
        path="title"
        :rule="[{ required: true, message: '请输入会议标题' }]"
      >
        <n-input v-model:value="model.title" clearable :maxlength="30" show-count />
      </n-form-item>
      <n-form-item
        label="会议时间"
        path="meetingTime"
        :rule="[{ required: true, message: '请选择会议时间' }]"
      >
        <n-date-picker
          v-model:formatted-value="model.meetingTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm"
          :time-picker-props="{ format: 'HH:mm' }"
          clearable
        />
      </n-form-item>
      <n-form-item label="会议简述" path="record">
        <n-input
          v-model:value="model.record"
          clearable
          :maxlength="300"
          show-count
          type="textarea"
          :autosize="{
            minRows: 3,
          }"
        />
      </n-form-item>
      <n-form-item label="附件" path="refFileDtoList">
        <FileUpload v-model="model.refFileDtoList" />
      </n-form-item>
    </MyDrawer>
  </div>
</template>
<script setup lang="jsx">
import { usePermissionStore } from '@/store'
import dayjs from 'dayjs'
import _ from 'lodash-es'
import { Delete } from '@vicons/carbon'
import { AccessTimeFilled, ArrowRightRound, ModeEditOutlined } from '@vicons/material'
import { useCrudPro } from '@/hooks/useCrudPro'
import * as projectApi from '@/api/project'
defineOptions({ name: 'MeetingMinutes' })
const props = defineProps({
  detail: {
    type: Object,
    default: () => ({}),
  },
})
const loading = ref(true)
const list = ref([])
const names = ref([])
const { hasPermission } = usePermissionStore()
async function getList() {
  loading.value = true
  const res = await projectApi.meetList(props.detail.id)
  list.value = Object.entries(
    _.groupBy(res.data, ({ meetingTime }) => {
      return dayjs(meetingTime).format('YYYY-MM')
    })
  )
    .map((item) => ({
      time: item[0],
      meets: item[1].sort((a, b) => dayjs(b.meetingTime).unix() - dayjs(a.meetingTime).unix()),
    }))
    .sort((a, b) => dayjs(b.time).unix() - dayjs(a.time).unix())
  loading.value = false
}
const { type, model, $form, handleAdd, handleEdit, handleSubmit, handleDelete } = useCrudPro({
  name: '会议纪要',
  initForm: {
    id: null,
    title: null,
    meetingTime: null,
    record: null,
    refFileDtoList: [],
  },
  apis: {
    add: (params) => projectApi.meetAdd({ ...params, projectId: props.detail.id }),
    edit: projectApi.meetEdit,
    del: ({ id }) => projectApi.meetDel(id),
  },
  handleReset() {
    getList()
  },
})
watch(
  () => props.detail.id,
  (val) => {
    if (val && hasPermission('/meetingRecords:get')) {
      nextTick(() => {
        getList()
      })
    }
  },
  {
    immediate: true,
  }
)
</script>
<style lang="scss" scoped>
.meet-list {
  .meet-item {
    width: 100%;
    display: flex;
    gap: 12px;
    .left {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 8px;
      margin-left: 10px;
      .point {
        flex-shrink: 0;
        width: 8px;
        height: 8px;
        background: #0a56d8;
        border-radius: 50%;
        margin: 8px 0;
      }
      .line {
        flex: 1;
        width: 2px;
        background: #e7eaf0;
      }
    }
    .center {
      font-size: 14px;
      color: #686f7c;
      flex-shrink: 0;
    }
    .right {
      max-width: 900px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 40px;
      .head {
        display: flex;
        align-items: center;
        gap: 20px;
        .title {
          font-size: 16px;
          font-weight: bold;
          color: #3a3e45;
        }
      }
      .record {
        font-size: 14px;
        color: #686f7c;
        width: 100%;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
      }
    }
    .handles {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      margin-bottom: auto;
    }
  }
}
</style>
